<style lang="less">
@import "../../assets/style/xinzheng.less";
</style>
<style scoped>
	.imgWeigth{
		width: 60px;
		height: 60px;
	}
	.van-cell__value{
		color: #999999;
	}
	.spanCon{
		font-size: 14px;
    		padding-left: 20px;
	}
</style>

<template>
	<mxq-router-layout>
		<div class="xinzheng">
			<Head slot="header" @headerClick="headerClick($event)">
				<div slot="headerTitle">
					{{headerTitle}}
				</div>
				<div slot="headerRight">
					<i class="iconfont icon-shouye"/>
					<!--<van-icon class="home" name="home"/>-->
				</div>
			</Head>

			<section class="van-doc-demo-block">
					<h5 class="van-doc-demo-block-title">审核信息详情</h5>
				<van-cell-group class="mt10">
					<van-cell v-for="(item,index) in listDataArr" :title="item.title" :value="item.value"/>
				</van-cell-group>
			</section>
			
			<section class="van-doc-demo-block">
					<h5 class="van-doc-demo-block-title">审核信息确认</h5>
				<van-cell-group class="mt10" v-if="showBtn">
						<all-qx :xgListArr="xgListArr" @getParams="getParams($event)"/>
				</van-cell-group>
				<van-cell-group class="mt10" v-if="!showBtn">
					<van-cell v-for="(item,index) in listDataArr2" :title="item.title" :value="item.value"/>
				</van-cell-group>
			</section>
			
			<section class="van-doc-demo-block">
					<h5 class="van-doc-demo-block-title">照片记录</h5>
				<van-cell-group class="mt10">
					<van-field
						class="detail_item"
						clearable
						:label="lsLabel"
						disabled>
						<van-icon slot="icon" class="slot-cont">
							<img v-if="lsPhotosArr && lsPhotosArr.length>=1"  v-for="(img,index) in lsPhotosArr" :key="index" :src="img.FILE_PATH" @click="previewImg(lsPhotosArr,index)" class="imgWeigth">
							<div class="spanCon" v-if="lsPhotosArr.length==0">无照片</div>
						</van-icon>
				</van-field>
				<van-field
						class="detail_item"
						clearable
						:label="clLabel"
						disabled>
						<van-icon slot="icon" class="slot-cont">
							<img v-if="clPhotosArr && clPhotosArr.length>=1" v-for="(img,index) in clPhotosArr" :key="index" :src="img.FILE_PATH" @click="previewImg(clPhotosArr,index)" class="imgWeigth">
							<div class="spanCon" v-if="clPhotosArr.length==0">无照片</div>
						</van-icon>
					</van-field>
				</van-cell-group>
			</section>
			
			<div class="btn_box" v-if="showBtn">
				<van-button size="small" class="btn_l" @click="saveShenhe(2)">不通过</van-button>
				<van-button size="small" class="btn_r" @click="saveShenhe(1)">通过</van-button>
			</div>
		</div>
	</mxq-router-layout>
</template>

<script>
import Head from '@/components/head'
import allQx from '@/view/components/shenhe/quexian-all'
import { callData,fileUrl } from '../../axios/axios'
import {
    Cell,
    CellGroup,
    Field,
    Button,
    Icon,
    Toast,
    Popup,
    SwitchCell,
	ImagePreview
} from 'vant'

export default {
    name: 'shenheGuanli',
    components: {
        Head,
        allQx,
        [Cell.name]:Cell,
        [CellGroup.name]: CellGroup,
        [Field.name]: Field,
        [Button.name]: Button,
        [Icon.name]: Icon,
        [Toast.name]: Toast,
        [Popup.name]: Popup,
        [SwitchCell.name]: SwitchCell
    },
    data() {
        return {
        		listDataArr: [],
        		listDataArr2: [],
        		xgListArr: {},
        		headerTitle: "缺陷审核详情",
        		clLabel: '缺陷处理照片',
        		lsLabel: '缺陷照片',
        		clPhotosArr: [],
        		lsPhotosArr: [],
        		query: this.$route.query,
        		checked: true,
        		isSuperior: 0,
            showBtn: true,
            imgs:[],
            getParam: {},
            qxList: [
            		{name: "基础",label:0},
            		{name: "杆塔",label:1},
            		{name: "导地线",label:2},
            		{name: "绝缘子",label:3},
            		{name: "金具",label:4},
            		{name: "接地装置",label:5},
            		{name: "通道环境",label:6},
            		{name: "附属设施",label:7}
			],
			qxdxVal: ''
        }
    },
    methods: {
        // 头部两侧按钮点击事件
		headerClick(e){
			this.$router.push({name:"index"})
		},
		// 照片放大
    		previewImg(img,index){
			let imgArr = []
			img.forEach((item,index) => {
				if(item.FILE_PATH) imgArr.push(item.FILE_PATH)
			})
			if(imgArr.length != 0){
				ImagePreview({
					images: imgArr,
					startPosition: index
				})
			}
		},
		// 拿到隐患、缺陷的数据
		getYhQxData(){
			let _this = this
			let param = {}
				param.reviewType = this.query.isYhOrDefect
				param.reviewId = this.query.reviewId
			callData('/accountServer/YhDefectCheck/findYhDefectDetails', 'get', param).then(res => {
				if(res.success){
					let data = res.data
					_this.formatQxData(data)
				}
			})
		},
		// 格式化照片成服务器地址
		formatPhoto(photos){
			let photoArr = []
			photos.forEach((item,index)=>{
				item.FILE_PATH = fileUrl(item.FILE_PATH)
				photoArr.push(item)
			})
			return photoArr
		},
		// 格式化隐患的数据
		formatQxData(res){
			let data = res.Details,
				clPhoto = res.pictureYou,
				lsPhoto = res.picture;
			let qxTypeName = this.$route.query.qxTypeName;
			if(data.DEFECT_CHARACTERIZATION.indexOf(qxTypeName + '') != -1){
				this.qxdxVal = data.DEFECT_CHARACTERIZATION.replace(qxTypeName + '-','');
			}else {
				this.qxdxVal = data.DEFECT_CHARACTERIZATION;
			}
			let listData = [
				{title:"线路名称",value:data.LINE_NAME_PY},
				{title:"运行杆塔",value:data.TOWER_NAME},
				{title:"发现人员",value:data.REALNAME},
				{title:"发现方式",value:data.WAY_OF_DISCOVERY},
				{title:"发现时间",value:data.FIND_TIME},
				{title:"审核状态",value:data.REVIEW_STATUS == 0 ? "审核中":data.REVIEW_STATUS == 1 ? "通过":"不通过"}
			]
			if(this.showBtn){//待审核
				let xgData = {
					qxlx: data.CHARACTERIZATION_NAME,
					qxdx: this.qxdxVal,// 
					qxjb: data.DEFECT_CLASSIFICATION,
					qxnr: data.DEFECT_CONTENT,
					qxfs: data.PLAN_PROCESSING,
					qxyyfx: data.CAUSE_ANALYSIS
				}
				let pid = null
				this.qxList.forEach((item,index)=>{
					if(data.CHARACTERIZATION_NAME == item.name) pid = item.label
				})
				this.xgListArr = {
					data: xgData,
					pid: pid
				}
			}else{//已审核
				let listData2 = [
					{title:"缺陷类型",value:data.CHARACTERIZATION_NAME},
					{title:"缺陷定性",value: data.DEFECT_CHARACTERIZATION},
					{title:"缺陷级别",value:data.DEFECT_CLASSIFICATION},
					{title:"缺陷内容",value:data.DEFECT_CONTENT},
					{title:"原因分析",value:data.CAUSE_ANALYSIS},
				]
				this.listDataArr2 = listData2
			}
			this.clPhotosArr = this.formatPhoto(clPhoto)
			this.lsPhotosArr = this.formatPhoto(lsPhoto)
			this.listDataArr = listData
		},
		// 拿到修改的数据
		getParams(e){
			this.getParam = e
			console.log('e',e);
		},
		// 点击通过|不通过的按钮
		saveShenhe(num){
			let _this = this
			let param = this.getParam
				param.id = this.query.id
				param.approvalStatus = num
				param.isSuperior = this.isSuperior
				param.reviewId  = this.query.reviewId
				param.isYhOrDefect = this.query.isYhOrDefect
				// 在这这里添加qxlxID,qxdxID,qxjbID
			console.log("传参：",param)
			callData('/accountServer/YhDefectCheck/assessmentYhDefect', 'post', param).then(res => {
				if(res.success){
					this.$router.push({
						name: 'shenhe_list'
					})
				}else{
					Toast(res.data);
				}
			})
		},
		isShowList(){
			if(this.query.active == 1) this.showBtn = false
			else this.showBtn = true
		}
    },
    mounted() {
    	this.isShowList()
		this.getYhQxData()
    }
}
</script>
